<template>
	<div class="xjlunbotubox">
		<div class="xjlunbotutitle"><span>轮播广告</span></div>
		<div class="xjlunbotucontent">
			<div class="xjselectlink" v-for="(item,index) in lunbotu" :key="index">
				<div class="avatar-uploader" @click="updateuploadimg(index)">
					<img v-if="item.src" :src="item.src" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</div>
				<span style="margin-left:10px">排序: </span>  <el-input style="width:50px;margin-right:20px"  v-model="item.sort" ></el-input>
				<el-button class="xjbutton mr-0" @click="setlink(index)">设置链接</el-button>
				<el-button class="ml-0 mr-10" type="danger" @click="deleteimg(index)">删除</el-button>
				<el-link type="primary" :href="item.url"><span style="color:black;" v-if="item.title">链接：</span>{{item.title}}</el-link>
			</div>
			<div class="xjselectlink">
				<div class="avatar-uploader" @click="adduploadimg">
					<i class="el-icon-plus avatar-uploader-icon"></i>
			   </div>
			</div>
			<p>
				<el-tag>只能上传jpg/png文件，且不超过1000kb</el-tag>
			</p>
			<p>建议尺寸750*280像素的图片,<span style="color:red">选择图片后点击保存才能生效</span></p>
		</div>
		<uploadimage ref="uploadimagecom" v-on:childByImageValue="childByImageValue"></uploadimage>
		<xjsetlink ref="xjsetlinkcom" v-on:childByLinkValue="childByLinkValue"></xjsetlink>
	</div>
</template>

<script>
	import uploadimage from '@/components/common/uploadimage.vue';
	import xjsetlink from '@/components/shop/xjsetlink.vue';
	export default {
		props: ["lunbotu"],
		components: {
			uploadimage,
			xjsetlink
		},
		data() {
			return {
				imageindex: 0,
				cishu:10,
				dialogVisible: false,
				action:"add"
			}
		},
		methods: {
			recindex(index) {
				this.imageindex= index;
				this.$refs.uploadimagecom.dialogVisible = true;//显示上传对话框
			},
			setlink(index){
				this.$refs.xjsetlinkcom.dialogVisible=true;
				this.imageindex=index;
			},
			deleteimg(index){
				let src = index;
				this.$parent.nowitem.swiperimg.splice(src, 1);
			},
			updateuploadimg(index) { //显示上传组件
				 this.action="update";
				 this.imageindex=index;
				 this.$refs.uploadimagecom.dialogVisible = true;//显示上传对话框
			},
			adduploadimg(index){
				 this.action="add";
				 this.imageindex++;
				 this.$refs.uploadimagecom.dialogVisible = true;//显示上传对话框
			},
			childByImageValue: function(childValue) {
				console.log(childValue)
				// childValue就是子组件传过来的值
				if(this.action=="add"){
			     this.$parent.nowitem.swiperimg.push({"src":childValue,"url":"","title":"",});
				}else if(this.action=="update"){
			     this.$parent.nowitem.swiperimg[this.imageindex].src=childValue;
				}
			},
			childByLinkValue(childValue){
                this.$parent.nowitem.swiperimg[this.imageindex].title = childValue.title;
				this.$parent.nowitem.swiperimg[this.imageindex].url = childValue.url;
				this.$parent.nowitem.swiperimg[this.imageindex].sort = childValue.sort;
			}
		},
		created() {
		}
	}
</script>

<style lang="scss">
	//@import "@/assets/css/common.scss";
	.xjlunbotubox {
		width: 400px;
		display: flex;
		flex-direction: column;
		height: 100%;

		.xjlunbotutitle {
			width: 100%;
			height: 30px;
			background-color: $danlv;
			border: 1px solid $qianlv;

			span {
				margin-left: 10px;
				font-size: 12px;
				line-height: 30px;
				color: $shenlv;
			}
		}

		.xjlunbotucontent {
			width: 100%;
			// height: 100%;
			background-color: white;
			border: 1px solid $qianlv;

			.xjselectlink {
				display: block;
				.avatar-uploader {
					border: 1px dashed #d9d9d9;
					border-radius: 6px;
					cursor: pointer;
					position: relative;
					overflow: hidden;
					width: 375px !important;
					text-align: center;
				}
			
				.avatar-uploader:hover {
					border-color: #409EFF;
				}
			
				.avatar-uploader-icon {
					font-size: 28px;
					color: #8c939d;
					width: 178px;
					height: 178px;
					line-height: 178px;
				}
				.avatar{
					width: 20% !important;
					height: 20% !important;
					display: block;
				}
			}

			.van-uploader__wrapper {
				flex-direction: column;
			}

			.xjbutton {
				background-color: $shenlv;
				color: white;
				margin: 0px 10px 12px;
				display: inline-block;
			}

			p {
				font-size: 12px;
				margin-left: 15px;
			}
		}

	}
</style>
